<!-- 游戏包sdk编辑弹窗 -->
<template>
  <el-dialog
    :title="'sdk配置'"
    :visible="visible"
    width="1000px"
    :destroy-on-close="true"
    :lock-scroll="false"
    @update:visible="updateVisible"
    :close-on-click-modal="false"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="240px">
      <el-form-item label="浮标icon:">
        <uploadImageFin :limit="1" v-model="form.icon"></uploadImageFin>
      </el-form-item>
      <el-form-item label="浮标中心点位置:" prop="icon_place_x">
        <el-radio-group v-model="form.icon_place_x" prop="icon_place_x">
          <el-radio :label="0">左侧</el-radio>
          <el-radio :label="1">右侧</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="浮标中心点距离屏幕顶部位置(%):" prop="icon_place_y">
        <el-input-number
          v-model="form.icon_place_y"
          type="numble"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="logo:">
        <uploadImageFin :limit="1" v-model="form.logo"></uploadImageFin>
      </el-form-item>
      <el-form-item label="登录配置:" prop="login_status">
        <el-radio-group v-model="form.login_status" prop="login_status">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">密码登录</el-radio>
          <el-radio :label="3">验证码登录</el-radio>
          <el-radio :label="4">密码登录优先</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="注册配置:" prop="register_status">
        <el-radio-group v-model="form.register_status" prop="register_status">
          <el-radio :label="1">全部</el-radio>
          <el-radio :label="2">账号注册</el-radio>
          <el-radio :label="3">手机号注册</el-radio>
          <el-radio :label="4">关闭快速登录</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="自动登录开关:" prop="automatic_logon_status">
        <el-radio-group
          v-model="form.automatic_logon_status"
          prop="automatic_logon_status"
        >
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="注册验证码开关:" prop="register_captcha_status">
        <el-radio-group
          v-model="form.register_captcha_status"
          prop="register_captcha_status"
        >
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="注册时协议是否默认勾选:" prop="register_pact_status">
        <el-radio-group
          v-model="form.register_pact_status"
          prop="register_pact_status"
        >
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="登录时协议是否默认勾选:" prop="login_pact_status">
        <el-radio-group
          v-model="form.login_pact_status"
          prop="login_pact_status"
        >
          <el-radio :label="0">否</el-radio>
          <el-radio :label="1">是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否显示用户协议:" prop="show_terms">
        <el-radio-group v-model="form.show_terms" prop="show_terms">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="万能sdk角色转移开关:" prop="wnsdk_status">
        <el-radio-group v-model="form.wnsdk_status" prop="wnsdk_status">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">显示</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="手机换绑开关:" prop="phone_replace_switch">
        <el-radio-group v-model="form.phone_replace_switch">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="账号注销开关:" prop="log_off_switch">
        <el-radio-group v-model="form.log_off_switch">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">开启</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="sdk弹框公告类型:" prop="notice_status">
        <el-radio-group v-model="form.notice_status" prop="notice_status">
          <el-radio :label="0">关闭</el-radio>
          <el-radio :label="1">每次登陆显示</el-radio>
          <el-radio :label="2">每天首次登陆显示</el-radio>
        </el-radio-group>
      </el-form-item>
      
      <el-form-item
        label="公告图片"
        prop="notice_image"
        v-if="form.notice_status == 1 || form.notice_status == 2"
      >
        <uploadImageFin :limit="1" v-model="form.notice_image"></uploadImageFin>
      </el-form-item>
      <el-form-item label="公告跳转地址:" v-if="form.notice_status==1||form.notice_status==2">
        <el-input v-model="form.notice_url"></el-input>
      </el-form-item>
      <el-form-item label="用户协议地址:">
        <el-input v-model="form.pact_url"></el-input>
      </el-form-item>
      <el-form-item label="隐私协议地址:">
        <el-input v-model="form.privacy_url"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading"
        >保存
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import uploadImageFin from '@/components/uploadImageFin'
import redioRuleData from '@/utils/rules'
export default {
  name: 'PackageSdkEdit',
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  components: { uploadImageFin },
  data() {
    return {
      // 表单数据
      form: Object.assign({
        login_status: 1,
        register_status: 1,
        automatic_logon_status: 1,
        register_captcha_status: 1,
        icon_place_x: 0,
        icon_place_y: 0,
        register_pact_status: 0,
        login_pact_status: 0,
        show_terms: 1,
        wnsdk_status: 0,
        notice_status: 0
      }),
      // 表单验证规则
      rules: {
        icon: [{ required: true, message: '请上传浮标icon', trigger: 'blur' }],
        logo: [{ required: true, message: '请上传logo', trigger: 'blur' }],
        login_status: [
          { required: true, message: '请选择登录配置', trigger: 'blur' }
        ],
        register_status: [
          { required: true, message: '请选择注册配置', trigger: 'blur' }
        ],
        automatic_logon_status: [
          { required: true, message: '请选择是否开启自动登录', trigger: 'blur' }
        ],
        register_captcha_status: [
          { required: true, message: '请选择注册验证码开关', trigger: 'blur' }
        ],
        icon_place_x: [
          { required: true, message: '请选择浮标中心点位置', trigger: 'blur' }
        ],
        icon_place_y: [
          {
            required: true,
            message: '请输入浮标中心点距离屏幕顶部位置',
            trigger: 'blur'
          },
          { type: 'number', message: '请输入有效的数字', trigger: 'blur' }
        ],
        register_pact_status: [
          {
            required: true,
            message: '请选择注册时协议是否默认勾选',
            trigger: 'blur'
          }
        ],
        login_pact_status: [
          {
            required: true,
            message: '请选择登录时协议是否默认勾选',
            trigger: 'blur'
          }
        ],
        show_terms: [
          { required: true, message: '请选择是否显示用户协议', trigger: 'blur' }
        ],
        wnsdk_status: [
          {
            required: true,
            message: '请选择万能sdk角色转移开关',
            trigger: 'blur'
          }
        ],
        phone_replace_switch: [
          {
            required: true,
            message: '请选择手机换绑开关',
            trigger: 'blur'
          }
        ],
        log_off_switch: [
          {
            required: true,
            message: '请选择账号注销开关',
            trigger: 'blur'
          }
        ],
        notice_status: [
          {
            required: true,
            message: '请选择sdk弹框公告类型',
            trigger: 'blur'
          }
        ],
        notice_image: [
          { required: true, message: '请上传公告图片', trigger: 'blur' }
        ]
      },
      packageId: '',
      redios: redioRuleData(),
      // 提交状态
      loading: false,
      // 是否是修改
      isUpdate: false,
      // sdk_version_guanlian: ""
      icon: '',
      logo: '',
      notice_image: '',
      icon_place_x: '',
      icon_place_y: '',
      login_status: '',
      register_status: '',
      automatic_logon_status: '',
      register_captcha_status: '',
      register_pact_status: '',
      login_pact_status: '',
      show_terms: '',
      save_form: {}
    }
  },
  watch: {
    visible() {
      if (this.data && this.visible) {
        this.packageId = this.data.id
        this.$http
          .get('/Package/getPackageConfig?package_id=' + this.packageId)
          .then((res) => {
            if (res.data.code === 0) {
              res.data.data
                ? (this.form = res.data.data)
                : (this.form = Object.assign({
                    login_status: 1,
                    register_status: 1,
                    automatic_logon_status: 1,
                    register_captcha_status: 1,
                    icon_place_x: 0,
                    icon_place_y: 0,
                    register_pact_status: 0,
                    login_pact_status: 0,
                    show_terms: 1,
                    wnsdk_status: 0,
                    notice_status: 0,
                    phone_replace_switch: 1,
                    log_off_switch: 1
                  }))
            } else {
              this.$message.error(res.data.msg)
            }
          })
          .catch((e) => {
            this.$message.error(e.message)
          })
        this.isUpdate = true
      } else {
        this.form = {}
        this.isUpdate = false
      }
    }
  },
  methods: {
    /* 保存编辑 */
    save() {
      this.$refs['form'].validate((valid) => {
        this.icon = this.form.icon
        this.icon_place_x = this.form.icon_place_x
        this.icon_place_y = this.form.icon_place_y
        this.login_status = this.form.login_status
        this.logo = this.form.logo
        this.register_status = this.form.register_status
        this.automatic_logon_status = this.form.automatic_logon_status
        this.register_captcha_status = this.form.register_captcha_status
        this.register_pact_status = this.form.register_pact_status
        this.login_pact_status = this.form.login_pact_status
        this.show_terms = this.form.show_terms
        this.wnsdk_status = this.form.wnsdk_status
        this.notice_status = this.form.notice_status
        this.notice_image = this.form.notice_image
        this.notice_url = this.form.notice_url
        this.pact_url = this.form.pact_url
        this.privacy_url = this.form.privacy_url
        this.phone_replace_switch = this.form.phone_replace_switch
        this.log_off_switch = this.form.log_off_switch

        this.save_form.package_id = this.packageId
        this.save_form.icon = this.icon
        this.save_form.icon_place_x = this.icon_place_x
        this.save_form.icon_place_y = this.icon_place_y
        this.save_form.login_status = this.login_status
        this.save_form.logo = this.logo
        this.save_form.register_status = this.register_status
        this.save_form.automatic_logon_status = this.automatic_logon_status
        this.save_form.register_captcha_status = this.register_captcha_status
        this.save_form.register_pact_status = this.register_pact_status
        this.save_form.login_pact_status = this.login_pact_status
        this.save_form.show_terms = this.show_terms
        this.save_form.wnsdk_status = this.wnsdk_status
        this.save_form.notice_status = this.notice_status
        this.save_form.pact_url = this.pact_url
        this.save_form.privacy_url = this.privacy_url
        this.save_form.phone_replace_switch = this.phone_replace_switch
        this.save_form.log_off_switch = this.log_off_switch

        if (this.save_form.notice_status != 0) {
          this.save_form.notice_image = this.notice_image
          this.save_form.notice_url = this.notice_url
        }
        if (valid) {
          this.loading = true
          this.form.package_id = this.packageId
          this.$http
            .post('/Package/setPackageSdkConfig', this.save_form)
            .then((res) => {
              this.loading = false
              if (res.data.code === 0) {
                this.$message.success(res.data.msg)
                if (!this.isUpdate) {
                  this.form = {}
                }
                this.updateVisible(false)
                this.$emit('done')
              } else {
                this.$message.error(res.data.msg)
              }
            })
            .catch((e) => {
              this.loading = false
              this.$message.error(e.message)
            })
        }
      })
    },

    /* 更新visible */
    updateVisible(value) {
      this.$emit('update:visible', value)
      // console.log(this.form, "!!");
    }
  }
}
</script>

<style scoped></style>
